<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Element UI CSS -->
	<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
	<!--本地CSS-->
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/element.css">
	<title>查看用户</title>
</head>
<body>
<div id="app">
	<el-container>

		<el-header>
			<el-menu mode="horizontal" router>
				<el-menu-item index="/">
					<strong class="text-primary">协同会议平台</strong>
				</el-menu-item>
				<el-menu-item style="float: right;" @click="logout">退出</el-menu-item>
			</el-menu>
		</el-header>

		<el-container style="height: 700px">
			<el-aside width="200px">

				<el-row class="sidebar-header" type="flex" align="middle">
					<div class="demo-image__preview">
						<a href="user_look.html">
							<el-avatar style="width: 60px; height: 60px" src="img/avatar-6.jpg"></el-avatar>
						</a>
					</div>
					<div>
						<span style="margin-left:10px;font-size: 12px;font-weight: bold">小灰</span><br>
						<span style="margin-left:10px;font-size: 12px;font-weight: bold">研发部</span>
					</div>
				</el-row>

				<el-menu :default-openeds="['1', '2','3']" default-active="2-1">
						<a href="home.html">
					<el-menu-item index="1">
							<i class="el-icon-house"></i>
							<span slot="title">主页</span>
					</el-menu-item>
						</a>

					<el-submenu index="2">
						<template slot="title">
							<i class="el-icon-user"></i>
							<span>用户列表</span>
						</template>
						<el-menu-item-group>
							<a href="user.html"><el-menu-item index="2-1">查看用户</el-menu-item></a>
							<a href="my_user.html"><el-menu-item index="2-2">我关注的用户</el-menu-item></a>
							<a href="article.html"><el-menu-item index="2-3">发布文章</el-menu-item></a>
							<a href="article_collect.html"><el-menu-item index="2-4">我的收藏</el-menu-item></a>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="3">
						<template slot="title">
							<i class="el-icon-office-building"></i>
							<span>部门列表</span>
						</template>
						<el-menu-item-group>
							<a href="department.html"><el-menu-item index="3-1">全部部门</el-menu-item></a>
							<a href="meeting.html"><el-menu-item index="3-2">会议系统</el-menu-item></a>
						</el-menu-item-group>
					</el-submenu>
				</el-menu>
			</el-aside>

			<el-main>
				<h2>用户列表</h2>
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="用户名">
						<el-input v-model="searchUsername" placeholder="请输入用户名..."></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSearch">查询</el-button>
					</el-form-item>
				</el-form>

				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="id" label="ID" width="50"></el-table-column>

					<el-table-column prop="username" label="用户名" width="150"></el-table-column>

					<el-table-column prop="name" label="姓名"  width="150"></el-table-column>

					<el-table-column prop="gender" label="性别"  width="150">
						<template slot-scope="scope">
							{{ scope.row.gender === 0 ? '女' : '男' }}
						</template>
					</el-table-column>

					<el-table-column prop="age" label="年龄"  width="150"></el-table-column>

					<el-table-column prop="bio" label="简介" width="250"></el-table-column>

					<el-table-column fixed="right" label="操作" width="150">
						<template slot-scope="scope">
							<a href="user_detail.html">详细信息</a>
						</template>
					</el-table-column>

					<el-table-column fixed="right" label="加关注" width="100">
						<el-checkbox label="" name="type"></el-checkbox>
					</el-table-column>

				</el-table>

				<br>
				<el-row type="flex" justify="center">
					<el-pagination layout="prev, pager, next" :total="50"></el-pagination>
				</el-row>

				<el-row type="flex" justify="center">
					<p>&copy; 2025.Company <a href="#">协同会议平台</a></p>
				</el-row>

			</el-main>
		</el-container>

		<!-- Footer -->
	</el-container>
</div>

<!-- Vue and Element UI JS -->
<script src="js/vue.min.js"></script>
<script src="js/element.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                searchUsername: '',
                tableData: [
                    {id: 1, username: 'xiaohui', name: '小灰', gender: 0, age: 19, bio: '我很美', followed: false},
                    {id: 2, username: 'xiaolan', name: '小蓝', gender: 1, age: 20, bio: '我很帅', followed: false},
                    {id: 2, username: 'xiaohong', name: '小红', gender: 1, age: 20, bio: '我很帅', followed: false},
                    {id: 2, username: 'xiaozi', name: '小紫', gender: 1, age: 20, bio: '我很帅', followed: false},
                    {id: 2, username: 'xiaowang', name: '小王', gender: 1, age: 20, bio: '我很帅', followed: false},
                    {id: 2, username: 'xiaozhi', name: '小志', gender: 1, age: 20, bio: '我很帅', followed: false},
                    {id: 2, username: 'xiaoling', name: '小令', gender: 1, age: 20, bio: '我很丑', followed: false}
                ]
            };
        },
        methods: {
            logout() {
                // Implement logout functionality here
                window.location.href = "index.html";
            },
            onSearch() {
                // Implement search functionality here
                console.log('Searching for:', this.searchUsername);
                window.location.href= "user.html";
            },
            viewDetail(row) {
                // Implement detail view functionality here
                console.log('Viewing detail of:', row);

            }
        }
    });
</script>
</body>
</html>